<nz-card>
  <div class="searchItem">
    <span class="label">综合搜索</span>
    <input nz-input placeholder="用户ID/昵称/手机号码" [(ngModel)]="query.search"/>
  </div>
  <div class="searchItem">
    <span class="label">注册时间</span>
    <nz-range-picker id="date" nzFormat="yyyy-MM-dd" [(ngModel)]="query.date"></nz-range-picker>
  </div>
  <div class="searchItem">
    <span class="label">实名认证</span>
    <nz-select [(ngModel)]="query.certificationType" nzPlaceHolder="全部" [nzBackdrop]="true" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="0" nzLabel="验证失败"></nz-option>
      <nz-option [nzValue]="1" nzLabel="验证成功"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetCondition()">重置</button>
  </div>
</nz-card>

<nz-card>

  <!--表格-->
  <nz-table
    #rowSelectionTable
    nzSize="small"
    nzTableLayout="fixed"
    nzShowSizeChanger
    nzShowQuickJumper
    nzOuterBordered
    [nzData]="listOfData.records"
    [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
    [nzTotal]="listOfData.total"
    [(nzPageIndex)]="query.page"
    [(nzPageSize)]="query.pageSize"
    [nzFrontPagination]="false"
    [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="onPageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange($event)"
  >
    <thead>
    <tr>
      <th nzAlign="center">用户ID</th>
      <th nzAlign="center">昵称</th>
      <th nzAlign="center">手机号码</th>
      <th nzAlign="center">最近登录时间</th>
      <th nzAlign="center">注册时间</th>
      <th nzAlign="center">点豆余额</th>
      <th nzAlign="center">活动赠送点豆</th>
      <th nzAlign="center">已充值金额</th>
      <th nzAlign="center">已消费金额</th>
      <th nzAlign="center">成长值</th>
      <th nzAlign="center">积分</th>
      <th nzAlign="center">实名认证</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
      <td nzAlign="center">{{ data['id'] }}</td>
      <td nzAlign="center">{{ data['nickname'] }}</td>
      <td nzAlign="center">{{ data['phone'] }}</td>
      <td nzAlign="center">{{ data['lastLoginTime'] }}</td>
      <td nzAlign="center">{{ data['regTime'] }}</td>
      <td nzAlign="center">{{ data['aiDouAmount'] }}</td>
      <td nzAlign="center">{{ data['giftAmount'] }}</td>
      <td nzAlign="center">{{ data['rechargeAmount'] }}</td>
      <td nzAlign="center">{{ data['payout'] }}</td>
      <td nzAlign="center">
        <a (click)="showDetail(data['id'],'growth')">{{ data['growth'] }}</a>
      </td>
      <td nzAlign="center">
        <a (click)="showDetail(data['id'],'integral')">{{ data['integral'] }}</a>
      </td>
      <td nzAlign="center"
          [attr.status]="data['certificateType']">{{ data['certificateType'] === 1 ? '验证成功' : '验证失败' }}</td>
    </tr>
    </tbody>
  </nz-table>
  <!-- 分页template -->
  <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
</nz-card>

<nz-modal
  [(nzVisible)]="detailModal.visible"
  [nzFooter]="null"
  nzWidth="800px"
  [nzTitle]="detailModal.type==='growth'?'成长值明细':'积分明细'"
  (nzOnCancel)="hideDetailModal()">
  <div *nzModalContent>
    <nz-table
      #detailModalTable
      nzSize="small"
      nzTableLayout="fixed"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzData]="detailModal.records"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="detailModal.total"
      [(nzPageIndex)]="detailModal.page"
      [(nzPageSize)]="detailModal.pageSize"
      [nzFrontPagination]="false"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onDetailModalPageIndexChange($event)"
      (nzPageSizeChange)="onDetailModalPageSizeChange($event)"
    >
      <thead>
      <tr>
        <th nzAlign="center">ID</th>
        <th nzAlign="center">类型</th>
        <th nzAlign="center">发生时间</th>
        <th nzAlign="center">分值</th>
        <th nzAlign="center">关联订单号</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of detailModalTable.data;let index=index;">
        <td nzAlign="center">{{ data['id'] }}</td>
        <td nzAlign="center" *ngIf="detailModal.type==='growth'">{{ data['type'] === 1 ? '充值' : '退款' }}</td>
        <td nzAlign="center" *ngIf="detailModal.type==='integral'">{{ POINTSTYPE[data['type']]}}</td>
        <td nzAlign="center">{{ data['createTime'] }}</td>
        <td nzAlign="center">{{ data['growthNum'] }}</td>
        <td nzAlign="center">{{ data['businessId'] }}</td>
      </tr>
      </tbody>
    </nz-table>
    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-modal>
